<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>QRCode</title>
    <script src="./config.js"></script>
    <script src="./qrcode.js"></script>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <div id="app"></div>
    <template id="app-template">
      <div class="center">
        <h2>QRCode</h2>
        <div class="tabbar">
          <div class="tab-item"
          :class="{'active-tab':activeIdx === $index}"
          @click="onTabClick($index)"
          v-for="(item, $index) in items">
            {{ item.ip }}
          </div>
        </div>
        <div v-show="activeIdx === $index" v-for="(item, $index) in items" :key="$index" class="qrcode">
          <a :href="item.url" target="_blank">
            <canvas ref="canvas" width="200" height="200"></canvas>
          </a>
          <p class="bundle-url">
            <span>
            {{ item.url }}
          </span>
          </p>
        </div>
      </div>
    </template>
    <script>
      /* eslint-disable */
      let port = PORT || 3000
      let startPath = ''
      new Vue({
        el: '#app',
        template: '#app-template',
        data: {
          activeIdx: 0,
          items: CURRENT_IPS.map((ip) => {return {url:`http://${ip}:${port}${startPath}`, ip:ip}})
        },
        mounted(){
          var qrcodedraw = new QRCodeLib.QRCodeDraw()
          // var temp = 'http://localhost:3002/login'
          const self = this
          this.items.forEach((item, idx) => {
            // let url = `http://${item.ip}:${self.port}/login`
            qrcodedraw.draw(self.$refs.canvas[idx], item.url, function(){})
            // new QRCodeLib.QRCodeDraw().draw(self.$refs.canvas[idx], url, function(){})
          })
        },
        methods: {
          onTabClick(idx){
            this.activeIdx = idx
          }
        }
      })
    </script>
  </body>
</html>
